<template>
	<div id="change_passwor">
		<toptitle :conter="'修改密码'"></toptitle>
		<div class="content">
			<div class="li1">
				<p>
					{{userInfo.loginPhone }}
				</p>
			</div>
			<div class="li2">
				<input v-model="inviteeCode" style="flex: 1;" type="text" value="" placeholder="请输入验证码" />
				<button :class="btnText=='获取验证码' ? 'buggetyaz' : 'getyaz'" size="mini" :type="type" shape="circle"
					:plain="true" :disabled="disabled" @click="btnSend">{{btnText}}</button>
			</div>
		</div>
		<div class="contents">
			<div class="li1">
				<input type="password" placeholder="新密码" v-model="forgetPassword.loginPassword">
			</div>
			<div class="li2">
				<input type="password" placeholder="确认新密码" v-model="forgetPassword.loginRePassword">
			</div>
		</div>
		<div class="li3">
			<button @click="forget()">确定修改</button>
		</div>
	</div>
</template>

<script>
	// <!-- 导入api文件 -->
	// 修改用户信息
	import {
		forgetPassword
	} from "@/api/user"
	// 引入顶部栏组件
	import toptitle from "@/components/top_title.vue"
	export default {
		components: {
			// 注册顶部栏组件
			toptitle,
		},
		created() {
			// var token = localStorage.getItem("token")
		},
		data() {
			return {
				disabled: false,
				inviteeCode: '', //验证码
				btnText: "获取验证码",
				type: "",
				userInfo: JSON.parse(localStorage.getItem('userInfo')),
				forgetPassword: {
					"token": localStorage.getItem("token"),
					// 用户新密码
					"loginPassword": "",
					// 用户确认新密码
					"loginRePassword": ""
				}
			}
		},
		methods: {
			doLoop(seconds) {
				this.btnText = seconds + "s后获取";
				let countdown = setInterval(() => {
					if (seconds > 0) {
						this.btnText = seconds + "s后获取"
							--seconds;
						if (seconds == 55) {
							this.inviteeCode = "0912"
						}
					} else {
						this.btnText = "获取验证码";
						this.disabled = false;
						this.type = "primary";
						clearInterval(countdown);
					}
				}, 1000);
			},
			btnSend() { //获取验证码
				this.disabled = true;
				this.btnText = "请稍候...";
				this.type = "gray"
				setTimeout(() => {
					this.doLoop(60)
				}, 500)
			},
			forget() {
				if (this.nums == "") {
					this.$Message.error('验证码不可为空')
					return
				}
				if (this.forgetPassword.loginPassword.length < 6 && this.forgetPassword.loginRePassword.length < 6) {
					this.$Message.error('密码不可小于6位')
					return
				} else if (this.forgetPassword.loginPassword !== this.forgetPassword.loginRePassword) {
					this.$Message.error('两次密码不一致')
					return
				}

				this.$Message.success('修改成功,请重新登录')

				forgetPassword(this.forgetPassword).then(res => {
						console.log("修改密码", res)
					})
					.catch(err => {
						console.error(err)
					})
				/* 延迟1秒跳转 */
				setTimeout(() => {
					// 修改成功 , 跳转到登录页面
					this.$router.push({
						path: '/logon'
					})
					// 并删除token
					localStorage.removeItem("token");
					localStorage.removeItem("userInfo");
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* // scss 变量 */
	$width: (100vw / 375);

	#change_passwor {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background-color: #f4f4f4;

		.content,
		.contents {
			width: 100%;
			margin-top: 44 * $width;
			overflow: hidden;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;

			.li1,
			.li2 {
				width: 85%;
				height: 55 * $width;
				background-color: #fff;
				border-bottom: 1 * $width solid #eee;
				display: flex;
				align-items: center;

				input {
					height: 44 * $width;
					border: none;
					background-color: #fff;
					outline: none;
					padding-left: 10 * $width;
					font-size: 16 * $width;
				}

				p {
					font-size: 16 * $width;
					line-height: 55 * $width;
					padding-left: 5 * $width;
				}

				button {
					border: none;
					background-color: #fff;
					color: #e93323;
					font-size: 16 * $width;
					border-left: 1 * $width solid #ccc;
					padding-left: 10 * $width;
					margin-left: 15 * $width;
				}

				.mobile {
					padding: 32rpx;
				}

				.verification-btn {
					width: 170rpx;
					height: 48rpx;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 0px 5rpx 0rpx rgba(204, 204, 204, 1);
					border-radius: 6rpx;
					color: rgba(51, 51, 51, 1);
					text-align: center;
					line-height: 48rpx;
					display: inline-block;
				}

				.verification {
					display: flex;
				}

				.getyaz {
					padding: 5rpx 15rpx;
					font-size: 22rpx;
					line-height: 30rpx;
					border-radius: 8rpx;
					color: #CCCCCC !important;
				}

				.buggetyaz {
					padding: 5rpx 15rpx;
					font-size: 22rpx;
					line-height: 30rpx;
					border-radius: 8rpx;
					color: #F27F31 !important;
				}

				.circle {
					width: 25rpx;
					height: 25rpx;
					border-radius: 50%;
					margin-top: 6rpx;
				}
			}

		}

		.contents {
			margin-top: 10 * $width;
		}

		.li3 {
			button {
				width: 80vw;
				margin: 10vw;
				height: 40 * $width;
				background-color: #e93323;
				color: #fff;
				border: none;
				border-radius: 20 * $width;
			}
		}
	}
</style>
